<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>车主认证</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <script src="/sunfc/js/jquery.js"></script>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_547056_gqkg6o7rbvi5p14i.css">
    <link rel="stylesheet" href="/sunfc/css/weui.min.css">
    <link rel="stylesheet" href="/sunfc/css/style.css">
    <style>
        .weui-cell{height:40px}
        .weui-media-box {
            padding: 0px;
        }
        .weui-media-box__desc {
            color: #000;
            font-size: 13px;
        }
        .weui-cells {
            margin-top: 0px;

        }
        .weui-cells:before {
            border-top: 0px solid #e5e5e5;
        }
        select {
            /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
            border: solid 0px #000;
            /*很关键：将默认的select选择框样式清除*/
            appearance:none;
            -moz-appearance:none;
            -webkit-appearance:none;

            /*加padding防止文字覆盖*/
            padding-right: 1px;
            outline: none;
            box-shadow: none;
            margin-left: 15px;
        }
        .weui-cell {
            padding: 1px 10px;
        }
        .weui-msg__opr-area {
            margin-bottom: 0px;
        }
        .weui-btn-area {
            margin: 0.8em 15px .3em;
        }
    </style>
</head>
<body  style="background:#f4f4f4">
<div class="index-top">
    <div class="index-back">
        <a href="{:url('index/sunfc.users/index')}">
            <img src="/sunfc/images/back.png" width="15">
        </a>
    </div>
    <p class="index-title">车主认证</p>
</div>
<!-- 这里写内容 -->
<div   style="margin-top:40px;">
    <div style="background:white;height: 200px">
        <div  style="padding:15px">
            <span   style="color:#3F85FE;margin-right: 15px" class="icon  icon-1"></span>
            <span   style="font-size:20px;font-weight:bolder">选择车辆品牌</span>
            <a  href="#" style="float:right;color: #84A1C0">需要帮助 <span class="icon icon-jiantou"></span></a>
        </div>
        <div>
            <div class="weui-cell weui-cell_access"   style="border: 1px solid  #CACACA;margin: 15px;border-radius: 3px">
                <div class="weui-cell__hd"  style="color:#8D8D8D">车辆品牌</div>
                <div class="weui-cell__bd">
                    <input class="weui-input" id="car_info" style="float: left;width: 50%;margin-left: 10px" type="text"  placeholder="请输入车型" value="{$res.car_info}">
                    <!--<input     style="float: left" type="text"  placeholder="请输入车型">-->
                    <select style="float: right;color: #8D8D8D" id="car_color" >
                        {if condition="($res.auth_driver == 2) OR ($res.auth_driver == 1)"}
                        <option  style="">{$res.car_color}</option>
                        {else /}
                        <option  style="">请选择颜色</option>
                        {/if}
                        <option   value="白色" > 白色</option>
                        <option value="红色">红色</option>
                        <option  value="黑色">黑色</option>
                        <option value="银色">银色</option>
                        <option value="香槟色">香槟色</option>
                        <option  value="灰色">灰色</option>
                        <option  value="蓝色">蓝色</option>
                        <option  value="黄色">黄色</option>
                        <option  value="绿色">绿色</option>
                        <option  value="咖啡色">咖啡色</option>
                        <option  value="橙色">橙色</option>
                        <option  value="其他">其他</option>
                    </select>
                    <!--<p> 奥迪A6红色</p>-->
                </div>
                <div class="weui-cell__ft"></div>

            </div>
            <div class="weui-cell weui-cell_access"   style="border: 1px solid  #CACACA;margin: 15px;border-radius: 3px">
                <div class="weui-cell__hd"  style="color:#8D8D8D">车牌号码</div>
                <div class="weui-cell__bd">
                    <input id="car_number" style="width:100%;height:40px;border-radius: 5px;padding-left: 10px"   class="weui-input" type="text" placeholder="例：豫p00000"  value="{$res.car_number}">
                </div>

            </div>
        </div>
    </div>
    <div style="background:white;margin-top: 10px;height: 210px">
        <div  style="padding:15px">
            <span   style="color:#3F85FE;margin-right: 15px" class="icon  icon-2"></span>
            <span   style="font-size:20px;font-weight:bolder">上传证件信息</span>
        </div>
        <div>

                {if condition="($res.auth_driver == 2) OR ($res.auth_driver == 1)"}
            <div  style="border: 1px  solid  #f4f4f4;width: 41%;height: 120px;float: left;margin-left: 7%;text-align: center">
                <img src="{$res.driver_license}" style="height: 120px;width: 160px" />
            </div>
                {else /}
            <div id="driver_license" style="border: 1px  solid  #f4f4f4;width: 41%;height: 120px;float: left;margin-left: 7%;text-align: center">
                <img src="/res/img/thumb.png" style="display: none;height: 120px;width: 160px" />
                <span style="line-height: 80px ;color: #cecece" class="icon icon-22jiahao"></span>
                <input type="hidden"  value="" >
                <div  style="color: #8D8D8D" >上传本人驾照</div>
            </div>
                {/if}





                {if condition="($res.auth_driver == 2) OR ($res.auth_driver == 1)"}
            <div  style="border: 1px  solid  #f4f4f4;width: 41%;height: 120px;float: right;margin-right: 7%;text-align: center">
                <img src="{$res.vehicle_license}" style="height: 120px;width: 160px" />
            </div>
                {else /}
            <div id="vehicle_license" style="border: 1px  solid  #f4f4f4;width: 41%;height: 120px;float: right;margin-right: 7%;text-align: center">
                <img src="/res/img/thumb.png" style="display: none;height: 120px;width: 160px" />
                <span style="line-height: 80px ;color: #cecece" class="icon icon-22jiahao"></span>
                <input type="hidden"  value="" >
                <div style="color: #8D8D8D" >上传本人或他人行驶证</div>
            </div>
                {/if}



        </div>
    </div>
    {if condition="($res.auth_driver == 2) OR ($res.auth_driver == 1)"}
    {else /}
    <div class="weui-msg__opr-area" style="width:100%;padding-bottom: 10px;margin-top:10px;">
        <div  style="padding-top: 5px;text-align: center;color: #8D8D8D">提交资料代表同意<a  href="#"  style="color: #fe8200">《合乘协议》</a>信息仅用于认证，不外泄</div>
        <p class="weui-btn-area" id="sub">
            <a href="javascript:;" class="weui-btn weui-btn_primary"   style="background:#4B4C5E" >提交认证</a>
        </p>

    </div>
    {/if}
</div>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
    //
    wx.config({
        debug: false,
        appId: '{$jsconfig.appId}',
        timestamp: '{$jsconfig.timestamp}',
        nonceStr: '{$jsconfig.noncestr}',
        signature: '{$jsconfig.signature}',
        jsApiList: [
            'checkJsApi',
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
            'onMenuShareQQ',
            'onMenuShareWeibo',
            'hideMenuItems',
            'showMenuItems',
            'hideAllNonBaseMenuItem',
            'showAllNonBaseMenuItem',
            'translateVoice',
            'startRecord',
            'stopRecord',
            'onRecordEnd',
            'playVoice',
            'pauseVoice',
            'stopVoice',
            'uploadVoice',
            'downloadVoice',
            'chooseImage',
            'previewImage',
            'uploadImage',
            'downloadImage',
            'getNetworkType',
            'openLocation',
            'getLocation',
            'hideOptionMenu',
            'showOptionMenu',
            'closeWindow',
            'scanQRCode',
            'chooseWXPay',
            'openProductSpecificView',
            'addCard',
            'chooseCard',
            'openCard'
        ]
    });
    wx.isInit = false;

    wx.ready(function () {



        // 5 图片接口
        // 5.1 拍照、本地选图
        var images = {
            localId: [],
            serverId: []
        };




        $('#driver_license').click(function () {
            wx.chooseImage({
                success: function (res) {
                    images.localId = res.localIds;
                    console.log('已选择 ' + res.localIds.length + ' 张图片');
                    var i = 0, length = images.localId.length;
                    images.serverId = [];
                    function upload() {
                        wx.uploadImage({
                            localId: images.localId[i],
                            success: function (res) {

                                i++;
                                console.log('已上传：' + i + '/' + length);
                                //单个上传完成时
//                                record.send_img(res.serverId);

                                $.get('/index/api/tempfile', {mid: res.serverId}, function (res) {
                                    console.log(res);
                                    if(res.code==1){
                                        //app.items.push(res.data);
                                        $('#driver_license img').attr('src',res.data.src);
                                        $('#driver_license span').hide();
                                        $('#driver_license div').hide();
                                        $('#driver_license img').show();
                                        $('#driver_license input').val(res.data.src);
                                    }
                                });

                                images.serverId.push(res.serverId);
                                if (i < length) {
                                    upload();
                                } else {
                                    //全部上传完成时


                                }
                            },
                            fail: function (res) {
                                alert(JSON.stringify(res));
                            }
                        });
                    }

                    upload();

                }
            });
        });
        $('#vehicle_license').click(function () {
            wx.chooseImage({
                success: function (res) {
                    images.localId = res.localIds;
                    console.log('已选择 ' + res.localIds.length + ' 张图片');
                    var i = 0, length = images.localId.length;
                    images.serverId = [];
                    function upload() {
                        wx.uploadImage({
                            localId: images.localId[i],
                            success: function (res) {

                                i++;
                                console.log('已上传：' + i + '/' + length);
                                //单个上传完成时
//                                record.send_img(res.serverId);

                                $.get('/index/api/tempfile', {mid: res.serverId}, function (res) {
                                    console.log(res);
                                    if(res.code==1){
                                        //app.items.push(res.data);
                                        $('#vehicle_license img').attr('src',res.data.src);
                                        $('#vehicle_license span').hide();
                                        $('#vehicle_license div').hide();
                                        $('#vehicle_license img').show();
                                        $('#vehicle_license input').val(res.data.src);
                                    }
                                });

                                images.serverId.push(res.serverId);
                                if (i < length) {
                                    upload();
                                } else {
                                    //全部上传完成时


                                }
                            },
                            fail: function (res) {
                                alert(JSON.stringify(res));
                            }
                        });
                    }

                    upload();

                }
            });
        });






    });

    wx.error(function (res) {
        alert(res.errMsg);
    });


</script>
<script>
    // 点击完成上传数据
    $(document).ready(function () {
        $('#sub').click(function () {
           //alert('6666');
            var carinfo =   $('#car_info').val();
            var carcolor   =  $('#car_color').val();
            var carnumber   =  $('#car_number').val();
            var driverlicense    =   $('#driver_license input').val();
            var vehiclelicense    =   $('#vehicle_license input').val();
           // alert("头像："+carinfo+"--昵称:"+carcolor+"--性别:"+driverlicense+"--公司:"+vehiclelicense);
            $.post("{:url('sunfc.users/authdriver')}",
                {
                    car_info:carinfo,
                    car_color:carcolor,
                    car_number:carnumber,
                    driver_license:driverlicense,
                    vehicle_license:vehiclelicense,
                },
                function(data){
                    if(data.code==1){
                        alert(data.msg);
                        window.location.href="{:url('index/sunfc.users/index')}";
                    }else {
                        alert(data.msg);
                    }
                });
        })
    })
</script>
</body>
</html>
